import Image from 'next/image';
import Link from 'next/link';
import { Destination } from '@prisma/client';

export function DestinationCard({
  destination,
}: {
  destination: Destination;
}) {
  return (
    <Link
      href={`/destinations/${destination.id}`}
      className="group block bg-white rounded-lg shadow overflow-hidden hover:shadow-md transition-shadow"
    >
      <div className="aspect-w-16 aspect-h-9 relative">
        <Image
          src={destination.imageUrl || '/default-destination.jpg'}
          alt={destination.name}
          fill
          className="object-cover group-hover:scale-105 transition-transform duration-200"
        />
      </div>
      <div className="p-4">
        <h3 className="font-semibold text-lg mb-1">{destination.name}</h3>
        {destination.description && (
          <p className="text-sm text-gray-600 line-clamp-2">
            {destination.description}
          </p>
        )}
      </div>
    </Link>
  );
} 